@mixin align-items($align-items: center, $direction: row) {
  align-items: $align-items;
  display: flex;
  flex-direction: $direction;
}

.flex-center {
  @include align-items;
  @apply justify-center;
}

.flex-around {
  @include align-items;
  @apply justify-around;
}

.flex-between {
  @include align-items;
  @apply justify-between;
}

.flex-evenly {
  @include align-items;
  @apply justify-evenly;
}

.flex-start {
  @include align-items;
  @apply justify-start;
}

.flex-center-column {
  @include align-items(center, column);
  @apply justify-center;
}

.flex-around-column {
  @include align-items(center, column);
  @apply justify-around;
}

.flex-between-column {
  @include align-items(center, column);
  @apply justify-between;
}

.flex-evenly-column {
  @include align-items(center, column);
  @apply justify-evenly;
}

.flex-start-column {
  @include align-items(center, column);
  @apply justify-start;
}
